import React, { Component } from 'react';
import {ScrollView, View} from '@tarojs/components'
import NewRadio from '../radio/index'
import './index.scss'

type Props = {
  data?: any
  onChange: Function
  wNo: any
  isCheck?: any
  iconSize?: any
  scrollWrap?: any
  size?: any
}
export default class checkGounp extends Component<Props> {
  constructor(props: Props) {
    super(props);
    this.setState({
      active: props.isCheck
    });
  }

  state: {
    active: any
  } = {
    active: null
  }

  Change(data: any, index) {
    this.setState({
      active: index
    });
    this.props.onChange(data);
  }

  render() {
    const {data, wNo, isCheck, size, scrollWrap, iconSize} = this.props;
    const {active} = this.state;
    const scrollLeft = 0;
    const Threshold = 20;
    return (
      <ScrollView
        className={`scrollview ${ scrollWrap && 'scrollWrap' } ${wNo ? 'w-no' : ''}`}
        scrollX
        scrollWithAnimation
        scrollLeft={scrollLeft}
        lowerThreshold={Threshold}
        upperThreshold={Threshold}
      >
        {
          data && data.length > 0 && data.map((item, index) => {
            return (
              <View className={scrollWrap && 'scrollWrap-item'} style='margin-right: 20px; display: inline-block;' key={index}>
                <NewRadio
                  iconSize={iconSize}
                  onChange={() => this.Change(item, index)}
                  value={item.label}
                  active={isCheck == item.value}
                  size={size}
                >
                </NewRadio>
              </View>
            )
          })
        }
      </ScrollView>
    )
  }
}
